<template>
  <div id="app">
    <MyHeader v-if="this.$store.state.user.user.uid === null"></MyHeader>
    <MyHeader2 v-else></MyHeader2>
    <MyMenu></MyMenu>
    <router-view/>
    <MyFooter></MyFooter>
  </div>
</template>
<!-- <template v-else>
  <div id="app">
    <MyHeader></MyHeader>
    <MyMenu></MyMenu>
    <router-view/>
    <MyFooter></MyFooter>
  </div>
</template> -->

<script>
import MyHeader from './components/MyHeader'
import MyHeader2 from './components/MyHeader2'
import MyMenu from './components/MyMenu'
import MyFooter from './components/MyFooter'

export default {
  name: 'app',
  components : { MyHeader,MyHeader2,MyMenu,MyFooter}
}
</script>

<style>
html,body{pading:0;margin:0;
font-family:Tahoma, "Microsoft YaHei", Trebuchet MS, Arial,
    Verdana, Tahoma, "DejaVu Sans", "Liberation sans",
    "Bitstream Vera Sans", sans-serif;font-size:13px;
    background-color: #fff;}
h1,h2,h3,h4,h5,ul,p,form{padding:0px;margin:0px;}
li{list-style: none;}
a{text-decoration: none;cursor: pointer;}
a:link{color: #444;}
a:visited{color: #444;}
img{border: 0;}
.fl{float: left;}
.fr{float: right;}
.height50{height: 50px;background-color: #EFEFF4;}
.height50-white{height: 50px;background-color: #fff;}
.w25{width: 25%;}
.w75{width: 75%;}
.red{color: #f00;}
.blue{color: #1479D7;}
.colour-orange{color:#FB2F00; }
.bg-red{background-color:#f72F17; }
.bg-red2{background-color:#ba2636; }
.bg-blue{background-color:#1479D7; }
.bg-blue2{background-color:#339999; }
.bg-green{background-color:#91d33f; }
.bg-green2{background-color:#009900; }
.bg-orange{background-color: #FB2F00;}
.bg-yellow{background-color: #ffab08;}
.bg-white{background-color: #fff;}
.bg-coffee{background-color: #ae7a47;}
.bg-gray{background-color: #999;}
.bg-gray2{background-color: #f0f0f0;}
.bg-violet{background-color: #996699;}
.padd-0-15{padding: 0 15px;}

.btn{display: block; height: 36px;line-height: 36px;text-decoration: none;text-align: center;border-radius:5px;}
.btn-orange{background-color: #FC2F00;color: #fff;}
.btn-yellow{background-color: #ffab08;color: #fff;}
.colour-yellow{color: #FBBD5B;}
.colour-orange{color: #FC2F00;}
.colour-blue{color: #3485FB;}
.colour-blue2{color: #339999;}
.colour-green{color: #91d33f;}
.colour-green2{color: #91d33f;}
.colour-red{color: #e94833;}
.colour-red2{color: #ba2636;}
.colour-coffee{color: #ae7a47;}
.colour-violet{color: #996699;}
.hidden{display: none;}
.curosr{cursor:pointer;}

.border-bottom{border-bottom: 1px solid #f0f0f0;}
.border-right{border-right: 1px solid #f0f0f0;}

.open-number {overflow: hidden;}
.open-number .num{color: #fff;width: 25px;height: 25px;text-align: center;display: inline-block;line-height: 25px;border-radius:50%;font-size: 14px;margin: 0 2px;}
.open-number .bg-white{color: #333;border: 1px solid #f6f6f6;}
.open-number .symbol{width: 10px;height: 25px;text-align: center;display: block;float: left;margin: 3px;font-size: 14px;}

.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;}
.mask .loading{position: fixed;z-index: 999;background-color: #444;opacity:0.7;align-items: center;box-sizing: border-box;display: flex;flex: 1 0 25%;flex-direction: column;justify-content: center;margin:0 auto;border-radius:15px;}
.masktrans{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 996;background-color: #999;opacity:0.5;-moz-opacity:0.5;}
.masktrans2{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 997;background-color: #999;opacity:0.5;-moz-opacity:0.5;display: none;}

.maincontent{width: 1000px;margin: 0 auto;overflow: hidden;}
.main-content{overflow: hidden;width: 1000px;margin: 0 auto;}
.margintop10{margin-top: 10px;}
.title{font-size: 14px;color: #666;}
.greyline{height: 8px;background-color: #f0f0f0;}
.main-content-gray{background-color: #efeff4;}
.text-align-center{text-align: center;}

.mui-col-2{width: 50%;}
.mui-col-3{width: 33.33333333%;}
.mui-col-4{width: 25%;}
.mui-col-5{width: 20%;}
.mui-col-6{width: 16.66666666%;}
.mui-col-9{width: 11.1111111%;}

.topline{height: 35px;background: #f5f5f5;line-height: 35px;color: #717171;}
.topline .loginline{overflow: hidden;}
/*.topline .logined{overflow: hidden;display: none;}*/

.topline .welcome{float: left;color: #717171;}
.topline .welcome .money, .topline .welcome .point {font-weight: bold;color: red;padding: 0 3px;}
.topline .login-line{float: right;}
.topline .login-line a{display: block;padding: 0 10px;float: left;}
.topline .login-line a#reg{border-left: 1px solid #ddd;}
.topline .login-line a:link{color: #444;}
.flex-line{}
.flex-line .logo{width: 180px;float: left;}
.flex-line .logo img{width: 100%;}
.flex-line .ady{width:200px;float: left;}
.flex-line .kf{width:120px;float: right;}
.flex-line .kf img{width:100%;}

.nav-line{background-color: #e60000;height: 45px;line-height: 45px; margin: 0 auto; width: 1000px;}
.nav-line .selebox a:link,.nav-line .menu-box a:link{color: #fff;font-size: 15px;}
.nav-line .selebox{width: 230px;float: left;position: relative;color: #fff;font-size: 15px;}
.nav-line .selebox #kinds{display: none;}
.nav-line .selebox .kinds{position: absolute;border: 2px solid #e60000;width: 230px;top: 43px;z-index: 999;background-color: #fff;}
.nav-line .selebox .kinds .kinds-cell{border-bottom: 1px dashed #eee;padding: 5px;overflow: hidden; }
.nav-line .selebox .kinds .kinds-cell:HOVER{background-color: #f9f9f9;}
.nav-line .selebox .kinds .kinds-cell a{color: #444;}
.nav-line .selebox .kinds .kinds-cell .czlogo{float: left;width: 35px;height: 35px;}
.nav-line .selebox .kinds .kinds-cell .czlogo img{width: 100%;}
.nav-line .selebox .kinds .kinds-cell .kind{float: left;font-size: 15px;padding: 0 5px;line-height: 34px;}
.nav-line .selebox .kinds .kinds-cell .note{float: left;font-size: 12px;color: #888;line-height: 34px;}

.nav-line .menu-box{width: 770px;float: left;}
.nav-line .menu-box .menu-cell{width: 96px;float: left;text-align: center;color: #fff;}
.nav-line .menu-box .menu-cell a{color: #fff;display: block;}
.nav-line .menu-box .menu-cell a:HOVER{background:#CD3527; }
.nav-line .menu-box .menu-cell a:link{color: #fff;}
.nav-line .menu-box .mui-active{background-color: #CD3527;}

.groupbuy .contents table {width: 100%;text-align: center;border-spacing: 0;}
.groupbuy .contents table thead tr th {border-bottom: 1px solid #E1E1E1;}
.groupbuy .contents table tbody tr td {color: #6c6c6c;}
.groupbuy .contents table tbody tr:nth-child(2n+2) td {background: #f5f5f5;}
.groupbuy .contents table thead tr th {line-height: 37px;color: #999;font-weight: normal;}
.groupbuy .contents table tbody tr td {height: 37px;font-size: 13px;}
.groupbuy .contents table tbody tr td .guard {background: #F60;color: white;padding: 2px;margin-left: 3px;font-size: 12px;}
.groupbuy .contents table thead tr th:nth-child(5) {text-align: right;}
.groupbuy .contents table tbody tr td:nth-child(5) {text-align: right;}
.groupbuy .contents table thead tr th:nth-child(6) {width: 8px;}
.groupbuy .contents table tbody tr td:nth-child(6) {width: 8px;}
.groupbuy .contents table thead tr th:nth-child(7) {text-align: left;}
.groupbuy .contents table tbody tr td:nth-child(7) {text-align: left;}
.groupbuy .contents .progress {border: 1px solid #ddd;width: 100px;margin: 0 auto;}
.groupbuy .contents .progress .bar {height: 6px;background: #e60000;}
.groupbuy .contents input {width: 38px;height: 21px;text-indent: 3px;line-height: 20px;}
.groupbuy .contents .buy {width: 51px;height: 22px;line-height: 22px;background: url("../static/images/btn.png") 0 -23px no-repeat;text-align: center;}
.groupbuy .contents .detail {width: 51px;height: 22px;line-height: 22px;text-align: center;color: white;background: #e60000;display: inline-block;}

.pager {text-align: center;padding: 20px;}
.pager a {padding: 0 1.5em;line-height: 32px;text-align: center;background: #eee;margin: 0 4px;display: inline-block;color: #666;}
.pager a:hover {color: red;}
.pager .gray {color: gray;}

footer {padding-top: 28px;text-align: center;background: #f4f4f4;border-top: 3px solid #eee;}
footer .help {display: flex;align-items: flex-start;margin-bottom: 10px;}
footer .help > div {flex: 0 0 20%;}
footer .help > div > div {font-size: 17px;display: flex;align-items: center;}
footer .help img {width: 40px;margin: 0 10px 0 30px;}
footer .help ul {list-style: none;margin: 0;padding: 0;}
footer .help ul li {line-height: 30px;list-style: none;}
footer .logos img {margin-right: 10px;}
footer .copyright {line-height: 22px;color: #545454;}
footer .copyright p {margin: 0;}
.bread-crumbs-guide {margin: 10px 0;}
.ball {font-weight: bold;font-family: Arial,Helvetica,sans-serif;display: inline-block;text-align: center;}
.bet-page .flexbox .ball {display: inline-block;width: 32px;height: 32px;line-height: 32px;border: 1px solid #ddd;text-align: center;border-radius: 16px;font-weight: bold;font-family: Arial,Helvetica,sans-serif;color: #333;font-size: 16px;}

.kefubox{font-size: 18px;text-align: right;font-weight: bold;color: #ff6600;font-family: Georgia;position: fixed;bottom: 50px;right: 24px;}
.leftSilder {z-index: 1000;position: fixed;left: -174px;top: 150px;transition: left .3s;}
.leftSilder .jcConraper {width: 174px;background: url(../static/images/c03.png) repeat-y 0 0;overflow: hidden;}
.leftSilder .jcConraper .hd {background: url(../static/images/c02.png) no-repeat 0 0;height: 44px;}
.leftSider .jcConraper ul{text-indent:-40px;}
.leftSider .jcConraper ul,li{margin:0;padding:0;list-style:none;}
.leftSilder .jcConraper ul li:nth-child(1) {font-size: 18px;text-align: center;font-weight: bold;color: #ff6600;padding: 15px 0 5px;font-family: Georgia;}
.leftSilder .jcConraper ul li:nth-child(1) span {font-size: 18px;text-align: center;font-weight: bold;color: #ff6600;padding: 15px 0 5px;font-family: Georgia;}
.leftSilder .jcConraper ul li:nth-child(2) {height: 10px;}
.leftSilder .jcConraper .ft {background: url(../static/images/c05.png) no-repeat 0 0; height: 11px;}
.leftSilder .jcConraper .bft {background: url(../static/images/c07.png) no-repeat;height: 13px;}
.leftSilder .jcConraper .lis {line-height: 22px; padding: 5px 18px 15px; overflow: hidden;}
.leftSilder .jcConraper .lis span {display: block;float: left; height: 22px;line-height: 22px;font-size: 13px;font-weight: bold;color: #555555;}
.leftSilder .jcConraper .lis a {display: block;float: right;width: 74px;height: 22px;background: red;}
.leftSilder .jcConraper .lis .clear {clear: both;}
.leftSilder .leftSilderHover {position: absolute;top: 0;left: 174px;width: 41px;height: 116px;cursor: pointer;background: url(../static/images/c01.png) no-repeat;}


/*<320*/
@media screen and (max-width: 320px) {
}
@media screen and (min-width: 321px) and (max-width: 640px) {
}
/*>640*/
@media screen and (min-width: 641px) {
  /**webkit*/
  ::-webkit-scrollbar { width: 11px;height: 11px;}
  ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px;border-radius: 10px;}
  ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px;border-radius: 10px;background: #d6d6d6; -webkit-box-shadow: inset 0 0 6px #999; }
  ::-webkit-scrollbar-thumb:window-inactive {background: #b2b2b2; }
}

@font-face {
  font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
/*   src: url('fonts/iconfont.eot?t=1480385993255'); IE9 */
/*   src: url('fonts/iconfont.eot?t=1480385993255#iefix') format('embedded-opentype') ;IE6-IE8 */
/*   src: url('fonts/iconfont.woff?t=1480385993255') format('woff'); chrome, firefox */
  src: url('../static/css/fonts/iconfont.ttf?t=1480385993256') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
/*   src: url('fonts/iconfont.svg?t=1480385993255#iconfont') format('svg'); iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

/*设置*/
.icon-shezhi:before { content: "\e609"; }

.icon-fenxiang:before { content: "\e654"; }
/*闪电*/
.icon-shandian:before { content: "\e604"; }
/**编辑*/
.icon-icon07:before { content: "\e607"; }

.icon-jiahao:before { content: "\e639"; }
.icon-jianhao:before { content: "\e752"; }
/*购物车*/
.icon-gouwuche:before { content: "\e629"; }

.icon-shoucang:before { content: "\e603"; }
/*商城*/
.icon-shangcheng:before { content: "\e620"; }

.icon-jifen:before { content: "\e674"; }

.icon-jifen1:before { content: "\e65e"; }

.icon-shoucang1:before { content: "\e662"; }

.icon-zoushixian:before { content: "\e61e"; }

.icon-navig-wode:before { content: "\e661"; }



@-webkit-keyframes scale{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
45%{opacity:.7;-webkit-transform:scale(.1);transform:scale(.1);}
80%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes scale{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
45%{opacity:.7;-webkit-transform:scale(.1);transform:scale(.1);}
80%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-pulse>div:nth-child(0){-webkit-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);}
.ball-pulse>div:nth-child(1){-webkit-animation:scale .75s .12s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .12s infinite cubic-bezier(.2,.68,.18,1.08);}
.ball-pulse>div:nth-child(2){-webkit-animation:scale .75s .24s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .24s infinite cubic-bezier(.2,.68,.18,1.08);}
.ball-pulse>div:nth-child(3){-webkit-animation:scale .75s .36s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .36s infinite cubic-bezier(.2,.68,.18,1.08);}
.ball-pulse>div{display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);}
66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);}
66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);transform:translateY(0);}
}
.ball-pulse-sync>div:nth-child(0){-webkit-animation:ball-pulse-sync .6s 0s infinite ease-in-out;animation:ball-pulse-sync .6s 0s infinite ease-in-out;}
.ball-pulse-sync>div:nth-child(1){-webkit-animation:ball-pulse-sync .6s 70ms infinite ease-in-out;animation:ball-pulse-sync .6s 70ms infinite ease-in-out;}
.ball-pulse-sync>div:nth-child(2){-webkit-animation:ball-pulse-sync .6s .14s infinite ease-in-out;animation:ball-pulse-sync .6s .14s infinite ease-in-out;}
.ball-pulse-sync>div:nth-child(3){-webkit-animation:ball-pulse-sync .6s .21s infinite ease-in-out;animation:ball-pulse-sync .6s .21s infinite ease-in-out;}
.ball-pulse-sync>div{display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0);}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0);}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-scale>div{display:inline-block;margin:2px;width:15px;width:60px;height:15px;height:60px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite;}
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0);}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0);}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
.ball-rotate{position:relative;}
.ball-rotate>div{position:relative;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.ball-rotate>div:first-child{-webkit-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;}
.ball-rotate>div:after,.ball-rotate>div:before{position:absolute;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;content:"";opacity:.8;}
.ball-rotate>div:before{top:0;left:-28px;}
.ball-rotate>div:after{top:0;left:25px;}
@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6);}
100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
.ball-clip-rotate>div{display:inline-block;margin:2px;width:15px;width:25px;height:15px;height:25px;border:2px solid #fff;border-radius:100%;background:0 0!important;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;border-bottom-color:transparent;-webkit-animation:rotate .75s 0s linear infinite;animation:rotate .75s 0s linear infinite;}
@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6);}
100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
@keyframes scale{30%{-webkit-transform:scale(.3);transform:scale(.3);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);transform:translateY(-15px);-ms-transform:translateY(-15px);}
.ball-clip-rotate-pulse>div{position:absolute;top:0;left:0;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.ball-clip-rotate-pulse>div:first-child{top:9px;left:9px;width:16px;height:16px;background:#fff;-webkit-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;}
.ball-clip-rotate-pulse>div:last-child{position:absolute;width:30px;height:30px;border:2px solid #fff;border:2px solid;border-color:#fff transparent #fff transparent;background:0 0;-webkit-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;animation-duration:1s;}
@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6);}
100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
.ball-clip-rotate-multiple{position:relative;}
.ball-clip-rotate-multiple>div{position:absolute;top:0;left:0;width:35px;height:35px;border:2px solid #fff;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both;border-bottom-color:transparent;border-top-color:transparent;-webkit-animation:rotate 1s 0s ease-in-out infinite;animation:rotate 1s 0s ease-in-out infinite;}
.ball-clip-rotate-multiple>div:last-child{top:10px;left:10px;display:inline-block;width:15px;height:15px;border-color:#fff transparent #fff transparent;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-direction:reverse;animation-direction:reverse;}
@-webkit-keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1);}
70%{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}
100%{opacity:0;}
}
@keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1);}
70%{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}
100%{opacity:0;}
}
.ball-scale-ripple>div{width:50px;height:50px;border:2px solid #fff;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);}
@-webkit-keyframes ball-scale-ripple-multiple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1);}
70%{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}
100%{opacity:0;}
}
@keyframes ball-scale-ripple-multiple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1);}
70%{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}
100%{opacity:0;}
}
.ball-scale-ripple-multiple{position:relative;-webkit-transform:translateY(-25px);transform:translateY(-25px);-ms-transform:translateY(-25px);}
.ball-scale-ripple-multiple>div:nth-child(0){-webkit-animation-delay:-.2s;animation-delay:-.2s;}
.ball-scale-ripple-multiple>div:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}
.ball-scale-ripple-multiple>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s;}
.ball-scale-ripple-multiple>div:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s;}
.ball-scale-ripple-multiple>div{position:absolute;top:0;left:0;width:50px;height:50px;border:2px solid #fff;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);}
@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-beat>div{display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-beat .7s 0s infinite linear;animation:ball-beat .7s 0s infinite linear;}
.ball-beat>div:nth-child(2n-1){-webkit-animation-delay:.35s!important;animation-delay:.35s!important;}
@-webkit-keyframes ball-scale-multiple{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);}
5%{opacity:1;}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ball-scale-multiple{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);}
5%{opacity:1;}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);transform:translateY(-30px);-ms-transform:translateY(-30px);}
.ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s;}
.ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s;}
.ball-scale-multiple>div{position:absolute;top:0;left:0;margin:2px;margin:0;width:15px;width:60px;height:15px;height:60px;border-radius:100%;background-color:#fff;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite;}
@-webkit-keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px);}
66%{-webkit-transform:translate(50px,0);transform:translate(50px,0);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px);}
66%{-webkit-transform:translate(50px,0);transform:translate(50px,0);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@-webkit-keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px);}
66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px);}
66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@-webkit-keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0);}
66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0);}
66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
.ball-triangle-path{position:relative;-webkit-transform:translate(-25px,-25px);transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);}
.ball-triangle-path>div:nth-child(1){-webkit-animation-name:ball-triangle-path-1;animation-name:ball-triangle-path-1;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.ball-triangle-path>div:nth-child(2){-webkit-animation-name:ball-triangle-path-2;animation-name:ball-triangle-path-2;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.ball-triangle-path>div:nth-child(3){-webkit-animation-name:ball-triangle-path-3;animation-name:ball-triangle-path-3;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.ball-triangle-path>div{position:absolute;width:10px;height:10px;border:1px solid #fff;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.ball-triangle-path>div:nth-of-type(1){top:50px;}
.ball-triangle-path>div:nth-of-type(2){left:25px;}
.ball-triangle-path>div:nth-of-type(3){top:50px;left:50px;}
@-webkit-keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1);}
25%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
50%{-webkit-transform:scale(.4);transform:scale(.4);}
75%{-webkit-transform:translateY(30px);transform:translateY(30px);}
100%{-webkit-transform:translateY(0);-webkit-transform:scale(1);transform:translateY(0);transform:scale(1);}
}
@keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1);}
25%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
50%{-webkit-transform:scale(.4);transform:scale(.4);}
75%{-webkit-transform:translateY(30px);transform:translateY(30px);}
100%{-webkit-transform:translateY(0);-webkit-transform:scale(1);transform:translateY(0);transform:scale(1);}
}
@-webkit-keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4);}
25%{-webkit-transform:translateY(30px);transform:translateY(30px);}
50%{-webkit-transform:scale(1.1);transform:scale(1.1);}
75%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
100%{-webkit-transform:translateY(0);-webkit-transform:scale(.75);transform:translateY(0);transform:scale(.75);}
}
@keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4);}
25%{-webkit-transform:translateY(30px);transform:translateY(30px);}
50%{-webkit-transform:scale(1.1);transform:scale(1.1);}
75%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}
100%{-webkit-transform:translateY(0);-webkit-transform:scale(.75);transform:translateY(0);transform:scale(.75);}
}
.ball-pulse-rise>div{display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-timing-function:cubic-bezier(.15,.46,.9,.6);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0;}
.ball-pulse-rise>div:nth-child(2n){-webkit-animation-name:ball-pulse-rise-even;animation-name:ball-pulse-rise-even;}
.ball-pulse-rise>div:nth-child(2n-1){-webkit-animation-name:ball-pulse-rise-odd;animation-name:ball-pulse-rise-odd;}
@-webkit-keyframes ball-grid-beat{50%{opacity:.7;}
100%{opacity:1;}
}
@keyframes ball-grid-beat{50%{opacity:.7;}
100%{opacity:1;}
}
.ball-grid-beat{width:57px;}
.ball-grid-beat>div:nth-child(1){-webkit-animation-delay:.36s;animation-delay:.36s;-webkit-animation-duration:.96s;animation-duration:.96s;}
.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:.93s;animation-duration:.93s;}
.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.68s;animation-delay:.68s;-webkit-animation-duration:1.19s;animation-duration:1.19s;}
.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:.41s;animation-delay:.41s;-webkit-animation-duration:1.13s;animation-duration:1.13s;}
.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:.71s;animation-delay:.71s;-webkit-animation-duration:1.34s;animation-duration:1.34s;}
.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:-.15s;animation-delay:-.15s;-webkit-animation-duration:.94s;animation-duration:.94s;}
.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:-.12s;animation-delay:-.12s;-webkit-animation-duration:1.2s;animation-duration:1.2s;}
.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:10ms;animation-delay:10ms;-webkit-animation-duration:.82s;animation-duration:.82s;}
.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:.32s;animation-delay:.32s;-webkit-animation-duration:1.19s;animation-duration:1.19s;}
.ball-grid-beat>div{float:left;display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ball-grid-beat;animation-name:ball-grid-beat;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0;}
@-webkit-keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1);}
50%{opacity:.7;-webkit-transform:scale(.5);transform:scale(.5);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1);}
50%{opacity:.7;-webkit-transform:scale(.5);transform:scale(.5);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-grid-pulse{width:57px;}
.ball-grid-pulse>div:nth-child(1){-webkit-animation-delay:-60ms;animation-delay:-60ms;-webkit-animation-duration:.72s;animation-duration:.72s;}
.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-animation-duration:1.02s;animation-duration:1.02s;}
.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:-.17s;animation-delay:-.17s;-webkit-animation-duration:1.28s;animation-duration:1.28s;}
.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:.48s;animation-delay:.48s;-webkit-animation-duration:1.42s;animation-duration:1.42s;}
.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.31s;animation-delay:.31s;-webkit-animation-duration:1.45s;animation-duration:1.45s;}
.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:30ms;animation-delay:30ms;-webkit-animation-duration:1.18s;animation-duration:1.18s;}
.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:.46s;animation-delay:.46s;-webkit-animation-duration:.87s;animation-duration:.87s;}
.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.78s;animation-delay:.78s;-webkit-animation-duration:1.45s;animation-duration:1.45s;}
.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:.45s;animation-delay:.45s;-webkit-animation-duration:1.06s;animation-duration:1.06s;}
.ball-grid-pulse>div{float:left;display:inline-block;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0;}
@-webkit-keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4);}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
.ball-spin-fade-loader{position:relative;}
.ball-spin-fade-loader>div:nth-child(1){top:25px;left:0;-webkit-animation:ball-spin-fade-loader 1s 0s infinite linear;animation:ball-spin-fade-loader 1s 0s infinite linear;}
.ball-spin-fade-loader>div:nth-child(2){top:17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s .12s infinite linear;animation:ball-spin-fade-loader 1s .12s infinite linear;}
.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;-webkit-animation:ball-spin-fade-loader 1s .24s infinite linear;animation:ball-spin-fade-loader 1s .24s infinite linear;}
.ball-spin-fade-loader>div:nth-child(4){top:-17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s .36s infinite linear;animation:ball-spin-fade-loader 1s .36s infinite linear;}
.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;-webkit-animation:ball-spin-fade-loader 1s .48s infinite linear;animation:ball-spin-fade-loader 1s .48s infinite linear;}
.ball-spin-fade-loader>div:nth-child(6){top:-17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s .6s infinite linear;animation:ball-spin-fade-loader 1s .6s infinite linear;}
.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;-webkit-animation:ball-spin-fade-loader 1s .72s infinite linear;animation:ball-spin-fade-loader 1s .72s infinite linear;}
.ball-spin-fade-loader>div:nth-child(8){top:17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s .84s infinite linear;animation:ball-spin-fade-loader 1s .84s infinite linear;}
.ball-spin-fade-loader>div{position:absolute;margin:2px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes ball-spin-loader{75%{opacity:.2;}
100%{opacity:1;}
}
@keyframes ball-spin-loader{75%{opacity:.2;}
100%{opacity:1;}
}
.ball-spin-loader{position:relative;}
.ball-spin-loader>span:nth-child(1){top:45px;left:0;-webkit-animation:ball-spin-loader 2s .9s infinite linear;animation:ball-spin-loader 2s .9s infinite linear;}
.ball-spin-loader>span:nth-child(2){top:30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 1.8s infinite linear;animation:ball-spin-loader 2s 1.8s infinite linear;}
.ball-spin-loader>span:nth-child(3){top:0;left:45px;-webkit-animation:ball-spin-loader 2s 2.7s infinite linear;animation:ball-spin-loader 2s 2.7s infinite linear;}
.ball-spin-loader>span:nth-child(4){top:-30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 3.6s infinite linear;animation:ball-spin-loader 2s 3.6s infinite linear;}
.ball-spin-loader>span:nth-child(5){top:-45px;left:0;-webkit-animation:ball-spin-loader 2s 4.5s infinite linear;animation:ball-spin-loader 2s 4.5s infinite linear;}
.ball-spin-loader>span:nth-child(6){top:-30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 5.4s infinite linear;animation:ball-spin-loader 2s 5.4s infinite linear;}
.ball-spin-loader>span:nth-child(7){top:0;left:-45px;-webkit-animation:ball-spin-loader 2s 6.3s infinite linear;animation:ball-spin-loader 2s 6.3s infinite linear;}
.ball-spin-loader>span:nth-child(8){top:30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 7.2s infinite linear;animation:ball-spin-loader 2s 7.2s infinite linear;}
.ball-spin-loader>div{position:absolute;width:15px;height:15px;border-radius:100%;background:green;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@-webkit-keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
.ball-zig-zag{position:relative;-webkit-transform:translate(-15px,-15px);transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);}
.ball-zig-zag>div{position:absolute;top:30px;left:30px;margin:2px;margin-left:15px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.ball-zig-zag>div:first-child{-webkit-animation:ball-zig .7s 0s infinite linear;animation:ball-zig .7s 0s infinite linear;}
.ball-zig-zag>div:last-child{-webkit-animation:ball-zag .7s 0s infinite linear;animation:ball-zag .7s 0s infinite linear;}
@-webkit-keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
50%{-webkit-transform:translate(0,0);transform:translate(0,0);}
67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
50%{-webkit-transform:translate(0,0);transform:translate(0,0);}
67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px);}
84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@-webkit-keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
50%{-webkit-transform:translate(0,0);transform:translate(0,0);}
67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
@keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
50%{-webkit-transform:translate(0,0);transform:translate(0,0);}
67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px);}
84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px);}
100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
}
.ball-zig-zag-deflect{position:relative;-webkit-transform:translate(-15px,-15px);transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);}
.ball-zig-zag-deflect>div{position:absolute;top:30px;left:30px;margin:2px;margin-left:15px;width:15px;height:15px;border-radius:100%;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.ball-zig-zag-deflect>div:first-child{-webkit-animation:ball-zig-deflect 1.5s 0s infinite linear;animation:ball-zig-deflect 1.5s 0s infinite linear;}
.ball-zig-zag-deflect>div:last-child{-webkit-animation:ball-zag-deflect 1.5s 0s infinite linear;animation:ball-zag-deflect 1.5s 0s infinite linear;}
@-webkit-keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1);}
50%{-webkit-transform:scaley(.4);transform:scaley(.4);}
100%{-webkit-transform:scaley(1);transform:scaley(1);}
}
@keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1);}
50%{-webkit-transform:scaley(.4);transform:scaley(.4);}
100%{-webkit-transform:scaley(1);transform:scaley(1);}
}
.line-scale>div:nth-child(1){-webkit-animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08);}
.line-scale>div:nth-child(2){-webkit-animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08);}
.line-scale>div:nth-child(3){-webkit-animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08);}
.line-scale>div:nth-child(4){-webkit-animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08);}
.line-scale>div:nth-child(5){-webkit-animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08);}
.line-scale>div{display:inline-block;margin:2px;width:4px;height:35px;border-radius:2px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes line-scale-party{0%{-webkit-transform:scale(1);transform:scale(1);}
50%{-webkit-transform:scale(.5);transform:scale(.5);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes line-scale-party{0%{-webkit-transform:scale(1);transform:scale(1);}
50%{-webkit-transform:scale(.5);transform:scale(.5);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
.line-scale-party>div:nth-child(1){-webkit-animation-delay:.77s;animation-delay:.77s;-webkit-animation-duration:1.26s;animation-duration:1.26s;}
.line-scale-party>div:nth-child(2){-webkit-animation-delay:.29s;animation-delay:.29s;-webkit-animation-duration:.43s;animation-duration:.43s;}
.line-scale-party>div:nth-child(3){-webkit-animation-delay:.28s;animation-delay:.28s;-webkit-animation-duration:1.01s;animation-duration:1.01s;}
.line-scale-party>div:nth-child(4){-webkit-animation-delay:.74s;animation-delay:.74s;-webkit-animation-duration:.73s;animation-duration:.73s;}
.line-scale-party>div{display:inline-block;margin:2px;width:4px;height:35px;border-radius:2px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:line-scale-party;animation-name:line-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0;}
@-webkit-keyframes line-scale-pulse-out{0%{-webkit-transform:scaley(1);transform:scaley(1);}
50%{-webkit-transform:scaley(.4);transform:scaley(.4);}
100%{-webkit-transform:scaley(1);transform:scaley(1);}
}
@keyframes line-scale-pulse-out{0%{-webkit-transform:scaley(1);transform:scaley(1);}
50%{-webkit-transform:scaley(.4);transform:scaley(.4);}
100%{-webkit-transform:scaley(1);transform:scaley(1);}
}
.line-scale-pulse-out>div{display:inline-block;margin:2px;width:4px;height:35px;border-radius:2px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:line-scale-pulse-out .9s 0s infinite cubic-bezier(.85,.25,.37,.85);animation:line-scale-pulse-out .9s 0s infinite cubic-bezier(.85,.25,.37,.85);}
.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){-webkit-animation-delay:.2s!important;animation-delay:.2s!important;}
.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){-webkit-animation-delay:.4s!important;animation-delay:.4s!important;}
@-webkit-keyframes line-scale-pulse-out-rapid{0%{-webkit-transform:scaley(1);transform:scaley(1);}
80%{-webkit-transform:scaley(.3);transform:scaley(.3);}
90%{-webkit-transform:scaley(1);transform:scaley(1);}
}
@keyframes line-scale-pulse-out-rapid{0%{-webkit-transform:scaley(1);transform:scaley(1);}
80%{-webkit-transform:scaley(.3);transform:scaley(.3);}
90%{-webkit-transform:scaley(1);transform:scaley(1);}
}
.line-scale-pulse-out-rapid>div{display:inline-block;margin:2px;width:4px;height:35px;border-radius:2px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78);animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78);}
.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:.25s!important;animation-delay:.25s!important;}
.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:.5s!important;animation-delay:.5s!important;}
@-webkit-keyframes line-spin-fade-loader{50%{opacity:.3;}
100%{opacity:1;}
}
@keyframes line-spin-fade-loader{50%{opacity:.3;}
100%{opacity:1;}
}
.line-spin-fade-loader{position:relative;}
.line-spin-fade-loader>div:nth-child(1){top:5px;left:-5px;-webkit-animation:line-spin-fade-loader 1.2s .12s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .12s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(2){top:1.64px;left:9.64px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s .24s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .24s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(3){top:-13.64px;left:14px;-webkit-transform:rotate(90deg);transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s .36s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .36s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(4){top:-27.64px;left:8.64px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s .48s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .48s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(5){top:-33.64px;left:-5px;-webkit-animation:line-spin-fade-loader 1.2s .6s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .6s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(6){top:-26.64px;left:-18.64px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s .72s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .72s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(7){top:-13.64px;left:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s .84s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .84s infinite ease-in-out;}
.line-spin-fade-loader>div:nth-child(8){top:.64px;left:-18.64px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s .96s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .96s infinite ease-in-out;}
.line-spin-fade-loader>div{position:absolute;margin:2px;width:4px;width:5px;height:35px;height:15px;border-radius:2px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0);}
50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg);}
100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0);}
}
@keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0);}
50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg);}
100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0);}
}
.triangle-skew-spin>div{width:0;height:0;border-right:20px solid transparent;border-bottom:20px solid #fff;border-left:20px solid transparent;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;}
@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0);}
50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg);}
100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0);}
}
@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0);}
50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg);}
100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0);}
}
.square-spin>div{width:50px;height:50px;border:1px solid red;background:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;}
@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
50%{-webkit-transform:rotate(0);transform:rotate(0);}
100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
50%{-webkit-transform:rotate(0);transform:rotate(0);}
100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
@-webkit-keyframes pacman-balls{75%{opacity:.7;}
100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@keyframes pacman-balls{75%{opacity:.7;}
100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
.pacman{position:relative;}
.pacman>div:nth-child(2){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear;}
.pacman>div:nth-child(3){-webkit-animation:pacman-balls 1s .33s infinite linear;animation:pacman-balls 1s .33s infinite linear;}
.pacman>div:nth-child(4){-webkit-animation:pacman-balls 1s .66s infinite linear;animation:pacman-balls 1s .66s infinite linear;}
.pacman>div:nth-child(5){-webkit-animation:pacman-balls 1s .99s infinite linear;animation:pacman-balls 1s .99s infinite linear;}
.pacman>div:first-of-type{width:0;height:0;border-top:25px solid #fff;border-right:25px solid transparent;border-bottom:25px solid #fff;border-left:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite;}
.pacman>div:nth-child(2){margin-top:-50px;width:0;height:0;border-top:25px solid #fff;border-right:25px solid transparent;border-bottom:25px solid #fff;border-left:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite;}
.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){position:absolute;top:25px;left:100px;margin:2px;width:15px;width:10px;height:15px;height:10px;border-radius:100%;background-color:#fff;-webkit-transform:translate(0,-6.25px);transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);}
@-webkit-keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg);}
50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg);}
75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg);}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}
@keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg);}
50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg);}
75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg);}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}
.cube-transition{position:relative;-webkit-transform:translate(-25px,-25px);transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);}
.cube-transition>div{position:absolute;top:0;left:0;width:10px;height:10px;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:cube-transition 1.6s 0s infinite ease-in-out;animation:cube-transition 1.6s 0s infinite ease-in-out;}
.cube-transition>div:last-child{-webkit-animation-delay:-.8s;animation-delay:-.8s;}
@-webkit-keyframes spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0);}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0);}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
.semi-circle-spin{position:relative;overflow:hidden;width:35px;height:35px;}
.semi-circle-spin>div{position:absolute;width:100%;height:100%;border-width:0;border-radius:100%;background-image:-webkit-linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);background-image:linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);-webkit-animation:spin-rotate .6s 0s infinite linear;animation:spin-rotate .6s 0s infinite linear;}
</style>
